<template>
  <div style="padding: 15px">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="车牌号" prop="licenseNumber">
        <el-autocomplete
          v-model="form.licenseNumber"
          :fetch-suggestions="(queryString, cb) => querySearchAsync(queryString, cb, 'licenseNumber')"
          placeholder="请输入车牌号"
          :clearable="true"
          @select="handleSelect"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="司机" prop="driverName">
        <el-autocomplete
          v-model="form.driverName"
          :fetch-suggestions="(queryString, cb) => querySearchAsync(queryString, cb, 'driverName')"
          placeholder="请选择司机"
          :clearable="true"
          @select="handleSelect"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="事故时间" prop="accidentTime">
        <el-date-picker
          v-model="form.accidentTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="事故地点" prop="violationPlace">
        <el-input v-model="form.violationPlace" placeholder="请输入事故地点" />
      </el-form-item>
      <el-form-item label="事故原因" prop="violationProject">
        <el-input v-model="form.violationProject" placeholder="请输入事故原因" />
      </el-form-item>
      <el-form-item label="责任方" prop="responsibleParty">
        <el-input v-model="form.responsibleParty" placeholder="请输入责任方" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item>
        <el-button @click="funcCancel">取 消</el-button>
        <el-button type="primary" @click="funcSubmit">确 定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import { vehicleAccidentCode, updateVehicleAccident } from "@/api/vehicleService";
Vue.use(VXETable);
export default {
  props: {
    restaurants: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      form: {},
      rules: {
        licenseNumber: [
          { required: true, message: "请输入车牌号", trigger: "change" }
        ],
        driverName: [
          { required: true, message: "请输入司机", trigger: "change" }
        ],
        accidentTime: [
          { required: true, message: "请输入事故时间", trigger: "blur" }
        ],
        violationPlace: [
          { required: true, message: "请输入事故地点", trigger: "blur" }
        ],
        violationProject: [
          { required: true, message: "请输入事故原因", trigger: "blur" }
        ],
        responsibleParty: [
          { required: true, message: "请输入责任方", trigger: "blur" }
        ],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
      }
    };
  },
  methods: {
    getInfo(code) {
      this.form = {}
      vehicleAccidentCode(code).then(response => {
        this.form = response.data;
        this.form.code = code
      });
    },
    // 提交
    funcSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          updateVehicleAccident(this.form)
            .then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: "success" });
              this.$emit("hideModel");
            })
        } else {
          return false;
        }
      });
    },
    // 取消
    funcCancel() {
      this.$emit("hideModel");
    },
    /**
     * 模糊查询
     * 车牌号/司机
     */
    querySearchAsync(queryString, cb, word) {
      var temArr1 = this.filterList(queryString, word);
      temArr1.forEach(item => {
        item.value = item[word];
      });
      cb(temArr1);
    },
    filterList(queryString, word) {
      var list = this.restaurants.filter(item => {
        if (item[word]) {
          return item[word].indexOf(queryString) > -1;
        }
      });
      return list;
    },
    handleSelect(item) {
      this.form.vehicleCode = item.code;
      this.form.driverCode = item.partyCode;
      this.form.driverName = item.driverName;
      this.form.licenseNumber = item.licenseNumber;
    }
  }
};
</script>
<style lang="scss" scoped>
.el-date-editor {
  width: 100%;
}
.el-autocomplete {
  width: 100%;
}
</style>
